<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <!--<link rel="stylesheet" href="css/silver/pace-theme-center-simple.css">-->
    <!--<link rel="stylesheet" href="css/silver/pace-theme-loading-bar.css">-->
    <script src="js/swiper.animate1.0.2.min.js"></script>
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<div class="container-a">
    <div class="bgm-btn-wraper"  style="display: block;" id="rotateMusic">
        <!--<div class="bgm-btn rotate"  style="animation-play-state: running;">-->
        <!--<audio loop="" src="images/music.mp3"  preload="" id="audio"></audio>-->
        <!--</div>-->
    </div>
    <div class="swiper-container "  >
        <div class="swiper-wrapper">
            <!--第o页-->
            <div class="swiper-slide page-zero">
            <div class="index-Banner " >
            <!--<img src="images/p1.jpg" alt="">-->
            </div>
            <div class="logo " >
            <img class="ani" src="images/logo.png" alt="" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
            </div>
            <div class="map ani" swiper-animate-effect="zoomFire" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
            <img src="images/map.png" alt="">
            </div>
            <div class="page1-head ani" >
                <div class="left-border ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                    <img src="images/page1-left-border.png" alt="">
                </div>
                <img src="images/text1.png" alt="" class="page-head-text ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s">
                <div class="right-border ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                    <img src="images/page1-right-border.png" alt="">
                </div>
            </div>
            <div class="page1-head2 ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">
                 <img src="images/index-headTitle2.png" alt="">
            </div>
            <div class="entry ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                <img src="images/arror.png" class="arrow " alt="" >
                 <img src="images/enter.png" alt="" class="ani entryBg" swiper-animate-effect="roll" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
            </div>
            <div class="light">

            </div>
            <div class="footer ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.1s" swiper-animate-delay="0.9s">

            </div>
            </div>
            <div class="swiper-slide page2">
                <div class="page2-bg">

                </div>
                <!--<img src="https://res1.eqh5.com/o_1bs767v1atbtkjbpjdtckggi1p.gif?imageMogr2/auto-orient/thumbnail/377x593%3E" class=""-->
                     <!--alt="">-->
            <!--<div class="page2-index"> </div>-->
            <div class="page2-logo " >
            <img src="images/page2-logo.png" class="ani"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" alt="" >
            </div>
            <div class="border">
            <div class="border-top ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">

            </div>
            <div class="border-right ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">

            </div>
            <div class="border-left ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">

            </div>
            <div class="page2-content ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
            <div class="page2-inner">
            <img src="images/p2-demo.jpg" alt="">
            <p>123</p>
            </div>
            </div>
            <div class="page2-content ani" style="margin-top: -0.1rem" swiper-animate-effect="fadeInRight"  swiper-animate-delay="1s">
            <div class="page2-inner">
            <img src="images/p2-demo.jpg" alt="">
            <p>123</p>
            </div>
            </div>
            </div>
            <div class="page2-footer " >
                <div class="page2-img">
                    <div class="fire ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
                        <img src="images/fire.png" alt="">
                    </div>
                    <img src="images/1.png" class="ani circle" swiper-animate-effect="zoomIn" swiper-animate-duration="3.5s" swiper-animate-delay="1s" alt="">
                </div>
            </div>
            </div>
            <div class="swiper-slide page3">
                <div class="page3-bg">

                </div>
            <div class="page2-logo " >
            <img src="images/page2-logo.png" class="ani"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" alt="" >
            </div>
            <div class="border">
            <div class="border-top ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">

            </div>
            <div class="border-right ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">

            </div>
            <div class="border-left ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">

            </div>
            <div class="page3-content ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">
            <img src="images/p3-demo.jpg" alt="">
            <p>
            领导视察领导视察领导视察
            </p>
            </div>
            <div class="page3-content p3-content-2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
            <img src="images/p3-demo.jpg" alt="">
            <p>
            领导视察领导视察领导视察
            </p>
            </div>
            <div class="page3-content ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
            <img src="images/p3-demo.jpg" alt="">
            <p>
            领导视察领导视察领导视察
            </p>
            </div>
            </div>
            <div class="page3-footer ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s">
            <!--<img src="images/p3-b1.png" alt="">-->
            </div>
            </div>
            <div class="swiper-slide page4" >
            <div class="page4-logo  "  style="top: 0.1rem">
            <img class="ani" src="images/page2-logo.png" alt="" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
            </div>
            <div class="p4-demo ani" style="margin-top: 0.5rem" swiper-animate-effect="fadeInLeft " swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
            <div class="inner">
            <img src="images/p4-b1.png" alt="">
            </div>
            <div class="p4-pic">
            <img src="images/p4-demo.jpg" alt="">
            <p>
            开幕式开幕式开幕式开幕式
            </p>
            </div>
            </div>
            <div class="p4-demo p4-demo2 ani" style="margin-top: 0.1rem" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
            <div class="inner">
            <img src="images/p4-b2.png" alt="">
            </div>
            <div class="p4-pic">
            <img src="images/p4-demo.jpg" alt="">
            <p>
            开幕式开幕式开幕式开幕式
            </p>
            </div>
            </div>
            <div class="p4-demo ani" style="margin-top: 0.1rem" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
            <div class="inner">
            <img src="images/p4-b1.png" alt="">
            </div>
            <div class="p4-pic">
            <img src="images/p4-demo.jpg" alt="">
            <p>
            开幕式开幕式开幕式开幕式
            </p>
            </div>
            </div>
            </div>
            <div class="swiper-slide page5">
                <div class="p5-top">
                <div class="p5-demo ani" swiper-animate-effect="zoomIn2" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">
                <img src="images/p5-demo.png" alt="">
                </div>
                <div class="p5-demo ani" swiper-animate-effect="zoomIn2" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">
                <img src="images/p5-demo.png" alt="">
                </div>
                </div>
                <div class="p5-bottom ani" swiper-animate-effect="zoomIn2" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
                    <div class="p5-demo " >
                    <img src="images/p5-demo.png" alt="">
                    </div>
            </div>
            </div>
            <div class="swiper-slide page6 init page6Scale" >
                <img src="images/p6-2.jpg" alt="" class="ani scaleImg " swiper-animate-effect="scaleDown" swiper-animate-duration="0.5s" swiper-animate-delay="s">
                <div class="page4-logo" >
                    <img class="ani" src="images/page2-logo.png" alt="" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                </div>
                <div class="bg">
                    <div class="page6-list">
                        <div class="page6-demo1 ani" swiper-animate-effect="zoomIn2" swiper-animate-duration="0.9s" swiper-animate-delay="0.8s">
                            <img src="images/p6-1.png" alt="">
                        </div>
                        <div class="page6-demo2 ani"  swiper-animate-effect="zoomIn2" swiper-animate-duration="0.9s" swiper-animate-delay="1.2s">
                            <img src="images/p6-2.png" alt="">
                        </div>
                        <div class="page6-demo3 ani" swiper-animate-effect="zoomIn2" swiper-animate-duration="0.9s" swiper-animate-delay="1.6s">
                            <img src="images/p6-3.png" alt="">
                        </div>
                        <div class="page6-demo4 ani" swiper-animate-effect="zoomIn2" swiper-animate-duration="0.9s" swiper-animate-delay="2s">
                            <img src="images/p6-4.png" alt="">
                        </div>
                        <div class="page6-demo5 ani" swiper-animate-effect="zoomIn2" swiper-animate-duration="0.9s" swiper-animate-delay="2.4s">
                            <img src="images/p6-5.png" alt="">
                        </div>
                    </div>
                </div>

                <!--<div class="footer-robort">-->
                    <!--<img src="images/robort.png" alt="">-->
                <!--</div>-->

            </div>
        </div>

    </div>
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/jquery.mobile-events.js"></script>
    <script src="js/wx-jdk.js"></script>
    <script src="js/pace.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/adaptive.js"></script>
    <!--<script src="js/drawLine.js"></script>-->
    <!--<script src="https://co.baifubao.com/content/mywallet/h5/yuanquan/js/global.js"></script>-->
    <!--<script src="https://co.baifubao.com/content/mywallet/h5/yuanquan/js/zepto/zepto.js"></script>-->
    <!--<script src="https://co.baifubao.com/content/mywallet/h5/yuanquan/js/zepto/event.js"></script>-->
    <!--<script src="https://co.baifubao.com/content/mywallet/h5/yuanquan/js/zepto/touch.js"></script>-->
    <!--<script src="https://co.baifubao.com/content/mywallet/h5/yuanquan/js/vector3d.js"></script>-->
    <!--<script src="https://co.baifubao.com/content/mywallet/h5/yuanquan/js/lufylegend-1.9.10.min.js"></script>-->
    <!--<script src="https://co.baifubao.com/content/mywallet/h5/yuanquan/js/main.js"></script>-->
    <script>

    </script>
    <script>
        (function (win) {
            // 设计图尺寸
            window['adaptive'].desinWidth = 750;
            // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem'  750的设计图一般设置为28,640的设计图一般设置为24
            window['adaptive'].baseFont = 28;
            // 显示最大宽度 可选
            window['adaptive'].maxWidth = 750;
            // rem值改变后执行方法 可选
            window['adaptive'].scaleType = 1;
            // 初始化
            window['adaptive'].init();

        })(window);
    </script>


    <script>
        //    $(function () {
        //
        //        //进入微信页面即加载
        //        document.addEventListener('WeixinJSBridgeReady', function() {
        //            document.getElementById('audio').play()
        //        })
        //    })

        window.onload = function () {

            var mySwiper = new Swiper('.swiper-container', {
                direction: 'vertical',
                initialSlide: 0,
                loop: false,
                on: {
                    init: function () {
                        swiperAnimateCache(this); //隐藏动画元素
                        swiperAnimate(this); //初始化完成开始动画
                    },
                    slideChangeTransitionEnd: function () {
                        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    },
                    slideChangeTransitionStart: function () {
                        var video =document.getElementById('video')
                        var audio =document.getElementById('audio')
                        if(this.activeIndex==1){
                            setTimeout(function () {
                                $('.page2-footer .circle').addClass('roateIn')
                                $('.page2-footer .circle').attr('swiper-animate-effect','roateIn')
//
                            },2000)
                        }else{
                            $('.page2-footer .circle').removeClass('roateIn')
                            $('.page2-footer .circle').attr('swiper-animate-effect','zoomIn')
                        }
                        if(this.activeIndex==2){
                            setTimeout(function () {
                                $('.page3-footer').addClass('flash2')
                                $('.page3-footer').attr('swiper-animate-effect','flash2')
//                                css({
//                                    animationName: 'flash2'
//                                })
                            },2000)
                        }else{
                            $('.page3-footer').removeClass('flash2')
                            $('.page3-footer').attr('swiper-animate-effect','fadeIn')
                        }
                        if(this.activeIndex==3){
//                            setTimeout(function () {
//                                $('.p4-demo').css({
//                                    animation: 'fadeInLeft1 1s linear 0.5s '
//                                })
//                            },1500)
                        }
                        if(this.activeIndex==$('.swiper-slide').length-1){
                                $('.page6').addClass('page6Scale')
//                        video.play()
//                        audio.pause()
//                        $('#rotateMusic').find('.bgm-btn').removeClass('rotate')
                        }else{
                            $('.page6').removeClass('page6Scale')
//                        video.pause()
//                        audio.play()
//                        $('#rotateMusic').find('.bgm-btn').addClass('rotate')
                        }
                    }
                }

            });
            $('.arrow').on('click',function () {
                mySwiper.slideTo(1,0,true)
            })

            Pace.on('hide', function () {
                $('.swiper-container').css('visibility','visible')
            });

        };
    </script>
</body>
</html>